<template>
  <div class="acticle-list">
    <i class="el-icon-edit" title="书写" @click="edit"></i>
    <el-table :data="acticleList" border style="width: 100%">
      <el-table-column prop="title" label="文章标题"></el-table-column>
      <el-table-column label="标签">
        <template slot-scope="scope">
          <el-tag class="tag" :key="tag" v-for="tag in scope.row.tags">{{tag}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="作者">
        <template slot-scope="scope">
          {{scope.row.author.nickName}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{scope.row.created_at | moment('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="最近修改时间">
        <template slot-scope="scope">
          {{scope.row.updated_at | moment('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="look(scope.row)">查看</el-button>
          <el-button type="text" @click="edit(scope.row)" size="small">编辑</el-button>
          <el-button type="text" @click="del(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
export default {
  name: "Acticle",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["acticleList"])
  },
  methods: {
    ...mapActions(["ACTICLE_LIST_ACTION", "ACTICLE_DELETE_ACTION"]),
    edit(item) {
      let id = item._id || "add";
      this.$router.push(`/index/acticles/${id}`);
    },
    async del(item) {
      let result = await this.ACTICLE_DELETE_ACTION(item._id);
      if (result.code === 1) {
        this.ACTICLE_LIST_ACTION();
      }
    },
    look(item) {
      console.log(item);
      window.open("https://www.justdodo.cn/#/index/" + item._id);
    }
  },
  mounted() {
    this.ACTICLE_LIST_ACTION();
  }
};
</script>
<style lang="scss" scoped>
.el-icon-edit {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
.tag {
  margin-left: 10px;
}
</style>
